<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><b>作业管理</b></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #545c99">题目集列表</span></el-breadcrumb-item>
      </el-breadcrumb>
      <div v-loading="loading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading">
        <div v-for="(item,index) in MySetlist" :key="index">
          <el-card class="set_card">
            <el-row>
              <el-col :span="10">
                <i class="el-icon-s-platform set_icon"></i>
                <el-button type="text" @click="JumpToJudge(item)">{{item.setName}}</el-button>
                <!--              <span class="title">{{item.setName}}</span>-->
              </el-col>
              <el-col :span="2" :offset="12">
                <el-tag v-if="Date.parse(item.startTime) > new Date()" effect="dark" type="warning">未开放</el-tag>
                <el-tag v-else-if="Date.parse(item.overTime) <= new Date()" effect="dark" type="info">已关闭</el-tag>
                <el-tag v-else effect="dark" type="success">已开放</el-tag>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px">
              <el-col :span="10">
                结束时间:
                <span style="color: #795da3">{{item.overTime.substring(0,4)}}</span>年
                <span style="color: #795da3">{{item.overTime.substring(5,7)}}</span>月
                <span style="color: #795da3">{{item.overTime.substring(8,10)}}</span>日
              </el-col>
              <el-col :span="5" :offset="9" style="float: right">
                <i class="el-icon-s-home set_icon"></i>
                <span style="color: #795da3">浙大宁波理工学院</span>
                <i class="el-icon-user-solid set_icon"></i>
                <span style="color: #795da3">{{item.teachName}}</span>
              </el-col>
            </el-row>
          </el-card>
        </div>
        <!--      分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          hide-on-single-page
          :page-sizes="[10, 15, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
  export default {
    name: 'Homework',
    data(){
      return{
        MySetlist: [], // 我的题目集
        queryInfo: {
          // 模糊搜索
          searchInfo: '',
          // 当前页数
          pagenum: 1,
          pagesize: 10
        },
        total: 0,
        loading: true
      }
    },
    created () {
      this.getMySetlist()
    },
    methods:{
      async getMySetlist () {
        const { data: res } = await this.$http.get('/set/findByTeach/' + localStorage.getItem('username'))
        console.log(res.data)
        if (res.status !== 200) {
          return this.$message.error(res.msg)
        }
        this.MySetlist = res.data
        if (this.MySetlist.length === res.data.length){
          this.total = this.MySetlist.length
          this.loading = false
        }
      },
      JumpToJudge(set){
        console.log(set)
        this.$router.push({path: '/CheckTest', query: {set:set}})
      },
      // 监听 pagesize 改变的事件
      handleSizeChange (newSize) {
        this.queryInfo.pagesize = newSize
        this.getMySetlist()
      },
      // 监听页码值改变的事件
      handleCurrentChange (newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getMySetlist()
      },
    }
  }
</script>

<style scoped>
  .title{
    color: #545c99;
    font-size: 20px;
  }
  .set_icon{
    transform: scale(1.25);
    padding-right: 8px;
    padding-left: 8px;
  }
  .set_card{
    margin-top: 14px;
  }
</style>
